{% extends 'base.html' %}
{% load static %}

{% block title %}
    博主主页
{% endblock %}

{% block content %}
    <section class="main-content">
        <div class="container-xl py-5">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <!-- 作者信息 -->
                    <div class="padding-30 rounded bordered bg-white mb-5 text-center shadow-sm">
                        <img src="/media/{{ author.user_head }}" alt="作者头像" class="rounded-circle mb-4" style="width: 120px; height: 120px; object-fit: cover;">
                        <h2 class="mb-1">{{ author.name }}</h2>
                        <p class="text-muted mb-4">生活 · 灵感 · 时尚 · 文化</p>
                        <p class="mb-4">已发布 {{ blogs|length }} 篇文章</p>
                        <div class="d-flex justify-content-center gap-3">
                            <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;"><i class="icon-facebook"></i></a>
                            <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;"><i class="icon-twitter"></i></a>
                            <a href="#" class="btn btn-outline-dark rounded-circle p-2" style="width: 40px; height: 40px;"><i class="icon-instagram"></i></a>
                        </div>
                    </div>

                    <!-- 博客列表 -->
                    <div class="section-header mb-4">
                        <h3 class="section-title">博主的文章</h3>
                        <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave" />
                    </div>

                    <div class="row gy-4">
                        {% for blog in blogs %}
                            <div class="col-md-6">
                                <div class="post post-list-sm square border rounded overflow-hidden shadow-sm hover-lift">
                                    <div class="thumb rounded">
                                        <a href="/life/detail/{{ blog.id }}">
                                            <div class="inner">
                                                <img src="{{ blog.fm_image }}" alt="post-title" class="cover-image"/>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="details p-3">
                                        <h6 class="post-title my-0"><a href="/life/detail/{{ blog.id }}">{{ blog.title }}</a></h6>
                                        <ul class="meta list-inline mt-2 mb-0">
                                            <li class="list-inline-item">{{ blog.create_time|date:"Y-m-d" }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {% empty %}
                            <p>暂无文章</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block css %}
<style>
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.cover-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
</style>
{% endblock %}
